<template>
<el-container>
  <el-aside width="500px">
    <el-card class="box-card">
      <h3 >摄像头列表</h3>
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item v-for="(group, i) in cameraNameList" :key="i" :name="group.regionName"
                          :title="group.regionName">
          <el-button v-for="(camera, i) in group.cameras" :key="i" style="display: inline; text-align: left; margin-left: 10px" type="text"
                     @click="play(camera.indexCode)" >
            {{ camera.name }}
          </el-button>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </el-aside>
  <el-main style="padding: 0">
    <el-card>
      <h3>监控播放</h3>
      <hr style="color: #F9F9F9">
      <hls-video :id="6" :src="playing" style="width: 1020px"/>
    </el-card>
  </el-main>
</el-container>
</template>

<script>
import {getCameraUrl, queryArtemisCamera} from "../../network/cameraVideoApi";
import hlsVideo from "./hlsVideo";
import {groupByRegionName} from "../../common/cameraUtils";

export default {
  name: "camera",
  components: {hlsVideo},
  data() {
    return {
      activeName: '1',
      playing: "",
      indexCode: [],
      cameraNameList: [],
    }
  },
  methods: {
    play(id) {
      getCameraUrl({id, streamType: 0}).then(res => {
        this.playing = res.data;
        console.log(this.playing)
      })
    },
    cameraPage() {
      queryArtemisCamera({params: 1}).then(res => {
        let data = res.data;
        this.cameraNameList = this.groupByRegionName(data);
        console.log(this.cameraNameList)
        for (let i = 0; i < data.length; i++) {
          this.indexCode.push({
            name: data[i].name,
            id: data[i].indexCode,
          })
        }
      })
    },
    groupByRegionName
  },
  mounted() {
    this.cameraPage();
    // const ratio = window.devicePixelRatio;
    // console.log(ratio)

  },
}
</script>

<style scoped>

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}

</style>
